<template>
  <div class="yikaitong">

    <div class="chart1wrap">
      <div class="ktsbox">
        <div class="item one">
          <p class="text">已开通</p>
          <p class="text"><i class="num">4</i>条</p>
        </div>
        <span class="line"></span>
        <div class="item two">
          <p class="text">即将开通</p>
          <p class="text"><i class="num">4</i>条</p>
        </div>
        <span class="line"></span>
        <div class="item three">
          <p class="text">计划新增</p>
          <p class="text"><i class="num">7</i>条</p>
        </div>
      </div>
      <div class="chartBox">

        <div ref="chart1" class="kaitonghangxian"></div>
        <p class="title2">开通率</p>
        <p class="title1">开通航线</p>
      </div>


    </div>
    <div class="chart2wrap">
      <div class="ktsbox">
        <div class="item one">
          <p class="text">已开通</p>
          <p class="text"><i class="num">3</i>条</p>
        </div>
        <span class="line"></span>
        <div class="item two">
          <p class="text">即将开通</p>
          <p class="text"><i class="num">1</i>条</p>
        </div>
        <span class="line"></span>
        <div class="item three">
          <p class="text">计划新增</p>
          <p class="text"><i class="num">6</i>条</p>
        </div>
      </div>
      <div class="chartBox">

        <div ref="chart2" class="kaitongkaban"></div>
        <p class="title2">开通率</p>
        <p class="title1">开通卡班</p>
      </div>


    </div>
    <div class="chart3wrap">
        <div class="ktsbox">
          <div class="item one">
            <p class="text">已开通</p>
            <p class="text"><i class="num">2</i>条</p>
          </div>
          <span class="line"></span>
          <div class="item two">
            <p class="text">即将开通</p>
            <p class="text"><i class="num">3</i>条</p>
          </div>
          <span class="line"></span>
          <div class="item three">
            <p class="text">计划新增</p>
            <p class="text"><i class="num">6</i>条</p>
          </div>
        </div>
        <div class="chartBox">

          <div ref="chart3" class="kaitonghaiyun"></div>
          <p class="title2">开通率</p>
          <p class="title1">开通海运</p>
        </div>


      </div>


  </div>
</template>

<script>
  export default {
    name: 'yikaitong',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {
      this.getEchartData()
      this.getEchartData2()
      this.getEchartData3()
    },
    methods: {
      getEchartData() {
        const chart1 = this.$refs.chart1;
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          var that = this;

          var percent = 36; //百分数

          const option = {

            xAxis: {
              show: false, //是否展示x轴
              min: function(value) { //调整x轴上面数据的位置
                return value.min - 7;
              },
              max: function(value) {
                return value.max + 7;
              },
              splitLine: {
                lineStyle: {
                  show: true,
                  type: 'dashed'
                }
              },
              "axisLabel": {
                "interval": 0,
                rotate: 40,
                textStyle: {
                  fontSize: 12,
                  color: '#000'
                },
              },
              data: ['1', '2', '3', '4', '5']
            },
            yAxis: {
              show: false,
              name: '',
              max: 200,
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            series: [{
                "name": '',
                "type": 'pie',
                "radius": ['50%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": 210,
                color: [{
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(11, 178, 194)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(27, 101, 163)' // 0% 处的颜色
                  }]
                }, 'transparent'],
                "hoverAnimation": false, //是否开启 hover 在扇区上的放大动画效果。
                "legendHoverLink": false, //是否启用图例 hover 时的联动高亮。
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },
                  "emphasis": {
                    "show": true,
                    "textStyle": {
                      "fontSize": '30',
                      "fontWeight": 'bold'
                    }
                  }
                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": 66,
                  "name": '1',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }, {
                  "value": 34,
                  "name": '2',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }]
              }, {
                "name": '',
                "type": 'pie',
                "radius": ['50%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": -30,
                "color": ['rgba(34,34,34,.9)', "transparent", "transparent"],
                "hoverAnimation": false,
                "legendHoverLink": false,
                "clockwise": false, //饼图的扇区是否是顺时针排布。
                "itemStyle": {
                  "normal": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  },
                  "emphasis": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  }
                },
                "z": 10,
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },

                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": (100 - percent) * 240 / 360,

                  "label": {
                    normal: {
                      formatter: percent + '%',
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal',
                        color: '#00edff'
                      }
                    }
                  },
                  "name": ''
                }, {
                  "value": 1,
                  "name": ''
                }, {
                  "value": 100 - (100 - percent) * 270 / 360,
                  "name": ''
                }]
              },
              { // 底部
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                startAngle: 210,
                endAngle: -30,
                labelLine: {
                  show: false
                },
                z: 15,
                silent: true,
                label: {
                  show: true,
                  rich: {
                    a: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.12),
                      padding: [-40, -40, 0, 0]
                    },
                    b: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.10),
                      padding: [-40, 0, 0, -45]
                    }
                  },
                  formatter: function(val) { // 底部0和100
                    if (val.dataIndex === 0) {
                      return '{a|0}'
                    }
                    if (val.dataIndex === 2) {
                      return '{b|100}'
                    }
                  }
                },
                data: [{ // 底部两条线
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 480,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 240,
                  itemStyle: {
                    color: 'transparent'
                  }
                }]
              },
            ]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },

      getEchartData2() {
        const chart2 = this.$refs.chart2;
        if (chart2) {
          const myChart = this.$echarts.init(chart2)
          var that = this;
          var percent = 28; //百分数

          const option = {
            xAxis: {
              show: false, //是否展示x轴
              min: function(value) { //调整x轴上面数据的位置
                return value.min - 7;
              },
              max: function(value) {
                return value.max + 7;
              },
              splitLine: {
                lineStyle: {
                  show: true,
                  type: 'dashed'
                }
              },
              "axisLabel": {
                "interval": 0,
                rotate: 40,
                textStyle: {
                  fontSize: 12,
                  color: '#000'
                },
              },
              data: ['1', '2', '3', '4', '5']
            },
            yAxis: {
              show: false,
              name: '',
              max: 200,
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            grid: {
              x: 80,
              y: 60,
              x2: 80,
              y2: 60,
            },
            series: [{
                "name": '',
                "type": 'pie',
                "radius": ['45%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": 210,
                color: [{
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(169, 91, 32)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(173, 72, 39)' // 100% 处的颜色
                  }]
                }, 'transparent'],
                "hoverAnimation": false, //是否开启 hover 在扇区上的放大动画效果。
                "legendHoverLink": false, //是否启用图例 hover 时的联动高亮。
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },
                  "emphasis": {
                    "show": true,
                    "textStyle": {
                      "fontSize": '30',
                      "fontWeight": 'bold'
                    }
                  }
                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": 66,
                  "name": '1',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }, {
                  "value": 34,
                  "name": '2',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }]
              }, {
                "name": '',
                "type": 'pie',
                "radius": ['45%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": -30,
                "color": ['rgba(34,34,34,.9)', "transparent", "transparent"],
                "hoverAnimation": false,
                "legendHoverLink": false,
                "clockwise": false, //饼图的扇区是否是顺时针排布。
                "itemStyle": {
                  "normal": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  },
                  "emphasis": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  }
                },
                "z": 10,
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },

                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": (100 - percent) * 240 / 360,

                  "label": {
                    normal: {
                      formatter: percent + '%',
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal',
                        color: '#ff872e'
                      }
                    }
                  },
                  "name": ''
                }, {
                  "value": 1,
                  "name": ''
                }, {
                  "value": 100 - (100 - percent) * 270 / 360,
                  "name": ''
                }]
              },
              { // 底部
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                startAngle: 210,
                endAngle: -30,
                labelLine: {
                  show: false
                },
                z: 15,
                silent: true,
                label: {
                  show: true,
                  rich: {
                    a: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.12),
                      padding: [-40, -40, 0, 0]
                    },
                    b: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.10),
                      padding: [-40, 0, 0, -45]
                    }
                  },
                  formatter: function(val) { // 底部0和100
                    if (val.dataIndex === 0) {
                      return '{a|0}'
                    }
                    if (val.dataIndex === 2) {
                      return '{b|100}'
                    }
                  }
                },
                data: [{ // 底部两条线
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 480,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 240,
                  itemStyle: {
                    color: 'transparent'
                  }
                }]
              },
            ]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },

      getEchartData3() {
        const chart3 = this.$refs.chart3;
        if (chart3) {
          const myChart = this.$echarts.init(chart3)
          console.log(myChart)
          var that = this;
          var percent = 25; //百分数

          const option = {
            xAxis: {
              show: false, //是否展示x轴
              min: function(value) { //调整x轴上面数据的位置
                return value.min - 7;
              },
              max: function(value) {
                return value.max + 7;
              },
              splitLine: {
                lineStyle: {
                  show: true,
                  type: 'dashed'
                }
              },
              "axisLabel": {
                "interval": 0,
                rotate: 40,
                textStyle: {
                  fontSize: 12,
                  color: '#000'
                },
              },
              data: ['1', '2', '3', '4', '5']
            },
            yAxis: {
              show: false,
              name: '',
              max: 200,
              splitLine: {
                lineStyle: {
                  type: 'dashed'
                }
              }
            },
            grid: {
              x: 80,
              y: 60,
              x2: 80,
              y2: 60,
            },
            series: [{
                "name": '',
                "type": 'pie',
                "radius": ['45%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": 210,
                color: [{
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(83, 42, 138)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(95, 55, 162)' // 100% 处的颜色
                  }]
                }, 'transparent'],
                "hoverAnimation": false, //是否开启 hover 在扇区上的放大动画效果。
                "legendHoverLink": false, //是否启用图例 hover 时的联动高亮。
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },
                  "emphasis": {
                    "show": true,
                    "textStyle": {
                      "fontSize": '30',
                      "fontWeight": 'bold'
                    }
                  }
                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": 66,
                  "name": '1',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }, {
                  "value": 34,
                  "name": '2',
                  itemStyle: {
                    borderWidth: 0,
                    borderColor: 'transparent'
                  }
                }]
              }, {
                "name": '',
                "type": 'pie',
                "radius": ['45%', '70%'],
                "avoidLabelOverlap": false,
                "startAngle": -30,
                "color": ['rgba(34,34,34,.9)', "transparent", "transparent"],
                "hoverAnimation": false,
                "legendHoverLink": false,
                "clockwise": false, //饼图的扇区是否是顺时针排布。
                "itemStyle": {
                  "normal": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  },
                  "emphasis": {
                    "borderColor": "transparent",
                    "borderWidth": "20"
                  }
                },
                "z": 10,
                "label": {
                  "normal": {
                    "show": false,
                    "position": 'center'
                  },

                },
                "labelLine": {
                  "normal": {
                    "show": false
                  }
                },
                "data": [{
                  "value": (100 - percent) * 240 / 360,

                  "label": {
                    normal: {
                      formatter: percent + '%',
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal',
                        color: '#8854dd'
                      }
                    }
                  },
                  "name": ''
                }, {
                  "value": 1,
                  "name": ''
                }, {
                  "value": 100 - (100 - percent) * 270 / 360,
                  "name": ''
                }]
              },
              { // 底部
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                startAngle: 210,
                endAngle: -30,
                labelLine: {
                  show: false
                },
                z: 15,
                silent: true,
                label: {
                  show: true,
                  rich: {
                    a: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.12),
                      padding: [-40, -40, 0, 0]
                    },
                    b: {
                      color: '#e1e9f0',
                      fontSize: that.commonFunction.fontSize(0.10),
                      padding: [-40, 0, 0, -45]
                    }
                  },
                  formatter: function(val) { // 底部0和100
                    if (val.dataIndex === 0) {
                      return '{a|0}'
                    }
                    if (val.dataIndex === 2) {
                      return '{b|100}'
                    }
                  }
                },
                data: [{ // 底部两条线
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 480,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 5,
                  itemStyle: {
                    color: 'transparent'
                  }
                }, {
                  value: 240,
                  itemStyle: {
                    color: 'transparent'
                  }
                }]
              },
            ]
          };
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      }

    }
  }
</script>

<style>
  .yikaitong {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .kaitonghangxian {
    width: 100%;
    height: 100%;
    display: block;
  }

  .kaitongkaban {
    width: 100%;
    height: 100%;
    display: block;
  }
  .kaitonghaiyun {
    width: 100%;
    height: 100%;
    display: block;
  }
  .chart1wrap {
    width: 33.33%;
    height: 100%;
    display: block;
    position: relative;
    color: #fff;
    text-align: center;
  }

  .chart1wrap .chartBox {
    width: 100%;
    height: 70%;

    position: relative;
    display: block;
  }

  .chart1wrap .chartBox .title1 {
    font-size: .14rem;
    position: absolute;
    bottom: .2rem;
    text-align: center;
    width: 100%;
  }

  .chart1wrap .chartBox .kaitonghangxian {
    position: absolute;
    top: 0;
  }

  .chart1wrap .chartBox .title2 {
    font-size: .12rem;
    position: absolute;
    bottom: .6rem;
    text-align: center;
    width: 100%;
    color: #00edff;
  }




  .chart2wrap {
    width: 33.33%;
    height: 100%;
    display: block;
    position: relative;
    color: #fff;
    text-align: center;
  }

  .chart2wrap .chartBox {
    width: 100%;
    height: 70%;

    position: relative;
    display: block;
  }

  .chart2wrap .chartBox .title1 {
    font-size: .14rem;
    position: absolute;
    bottom: .2rem;
    text-align: center;
    width: 100%;
  }

  .chart2wrap .chartBox .kaitongkaban {
    position: absolute;
    top: 0;
  }

  .chart2wrap .chartBox .title2 {
    font-size: .12rem;
    position: absolute;
    bottom: .6rem;
    color: #ff872e;
    text-align: center;
    width: 100%;
  }


  .chart3wrap {
    width: 33.33%;
    height: 100%;
    display: block;
    position: relative;
    color: #fff;
    text-align: center;
  }

  .chart3wrap .chartBox {
    width: 100%;
    height: 70%;

    position: relative;
    display: block;
  }

  .chart3wrap .chartBox .title1 {
    font-size: .14rem;
    position: absolute;
    bottom: .2rem;
    text-align: center;
    width: 100%;
  }

  .chart3wrap .chartBox .kaitonghangxian {
    position: absolute;
    top: 0;
  }

  .chart3wrap .chartBox .title2 {
    font-size: .12rem;
    position: absolute;
    bottom: .6rem;
    text-align: center;
    width: 100%;
    color: #00edff;
  }




  .ktsbox {
    border: 1px solid #064487;
    display: flex;
    justify-content: space-between;
    padding: .08rem;
    border-radius: .05rem;
    margin: .2rem 2% 0;
  }

  .ktsbox .text {
    font-size: .12rem;
  }

  .ktsbox .num {
    font-size: .22rem;
  }

  .ktsbox .one {
    color: #ffb508;

  }

  .ktsbox .two {
    color: #8251d6;
  }

  .ktsbox .three {
    color: #0cceda;
  }

  .ktsbox .line {
    width: .001rem;
    height: .36rem;
    display: block;
    border-right: .002rem dashed #052563;

  }
</style>
